<template>
  <c-section :title="title">
    <c-table-box hide-func checkbox no-request :data="drawData" :table-config="tableConfig" :table-height="200" :v-bind="$attrs" @selection-change="selectionChange" v-on="$listeners">
      <template #btn>
        <slot>
          <SelectRD title="选择图纸" :params-raw="paramsRaw" :other-filters="otherFilters" :interface-path="interfacePath" style="margin-right:10px;" @confirm="confirmHandle" />
          <!-- <c-select-dialog v-model="selections" multiple :props="{label: 'picTaskName', value: 'picTaskName'}" :config="config">{{ title }}</c-select-dialog> -->
          <c-button type="primary" @click="removeHandle">删除</c-button>
        </slot>
      </template>
    </c-table-box>
  </c-section>
</template>
<script>
import SelectRD from './relevanceDrawing'
export default {
  name: 'RD',
  components: {
    SelectRD
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    otherFilters: {
      type: Array,
      default: () => []
    },
    paramsRaw: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: '关联图纸信息'
    },
    interfacePath: {
      type: String,
      default: '/slm-admin/api/v1/shopDesignPicture/page'
    }
  },
  data() {
    return {
      curSelections: [], // 要删除的
      selections: [],
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'picTaskName',
            label: '图纸名称',
            minWidth: 100,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'PIC_TYPE'
            }
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: 110,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'DECORATION_RANGE'
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'DECORATION_FORM'
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 140,
            render: (h, row) => {
              return h('c-design-area', { props: { value: row.designSpace }})
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'BIZ_TYPE'
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            minWidth: 100
          },
          {
            prop: 'softwareSumArea',
            label: '软体区总面积',
            minWidth: '120'
          },
          {
            prop: 'suiteSumArea',
            label: '套房区总面积',
            minWidth: '120'
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务总面积',
            minWidth: 120
          }
        ]
      }
    }
  },
  computed: {
    drawData() {
      const t = this.selections.filter(e => {
        return !e.isRemove
      })
      const data = {}
      for (const item of t) {
        data[item.id] = item
      }
      return Object.values(data)
    }
  },
  watch: {
    drawData: {
      handler(v) {
        this.$emit('change', v)
      },
      immediate: true
    },
    data: {
      handler(v) {
        // for (const d of this.data || []) {
        //   if (this.selections.every(e => e.id !== d.id)) {
        //     this.selections.unshift(d)
        //   }
        // }
        this.selections = []
        this.selections.push(...(v || []))
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    confirmHandle(selections) {
      // this.selections = [...this.selections, ...selections]
      const st = {}
      for (const item of this.selections) {
        st[item.id] = item
      }
      for (const item of selections) {
        if (st[item.id]) {
          this.$set(st[item.id], 'isRemove', false)
        } else {
          st[item.id] = item
        }
      }
      this.selections = Object.values(st)
    },
    selectionChange(v) {
      this.curSelections = v
    },
    removeHandle() {
      if (this.selections.length === 0) {
        this.$message.warning('请选择要删除的数据！')
        return
      }
      this.curSelections.forEach(e => {
        // e.isRemove = true
        this.$set(e, 'isRemove', true)
      })
      this.curSelections = []
    },
    toDetail(row) {
      this.$router.push({ name: 'ShopDrawingDetail', query: { id: row.id }})
      // this.$store.dispatch('views/goPage', { path: '/DrawingsManagement/detail', query: { id: row.id }})
    }
  }
}
</script>
